<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>


    <title>jqGird</title>

    <!-- 引入公用部分 -->
    <script th:replace="common/head::static"></script>

    <link th:href="@{css/jquery-ui.css}" rel="stylesheet"/>

    <style>
        /* Additional style to fix warning dialog position */
        #alertmod_table_list_2 {
            top: 900px !important;
        }
    </style>

</head>

<body class="gray-bg">




<!-- 分配角色 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">分配角色</h4>
            </div>
            <div class="modal-body" id="rolesApp">
                <form class="layui-form" id="updateRoleForm" >
                    <div class="layui-form-item" >
                        <div class="layui-input-block">
                            <input v-for="role in roles" name="rol" type="radio"  :value="role.roleId" :title="role.roleName" >
                            <input style="display: none" id="userId" name="userId" type="text"/>

                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" id="updateRoleSubmit" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>

<!-- 编辑弹窗-->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" >修改用户</h4>
            </div>
            <div class="modal-body" >
                <form class="layui-form" id="updateUserForm" >
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 90px">用户编号:</label>
                        <div class="layui-input-block">
                            <input type="text" id="updateUserId" name="updateUserId" readonly="readonly" lay-verify="title"  placeholder="请输入用户编号" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">电话:</label>
                        <div class="layui-input-block">
                            <input type="text" id="phone" lay-verify="title" name="phone" autocomplete="off" placeholder="请输入电话" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 90px">真实姓名:</label>
                        <div class="layui-input-block">
                            <input type="text" id="trueName" lay-verify="title" name="trueName" autocomplete="off" placeholder="请输入真实姓名" class="layui-input">
                        </div>
                    </div>
                </form>



            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button"  class="btn btn-primary" id="updateUserSubmit">确定</button>
            </div>

        </div>
    </div>
</div>




<div id="loading" style="text-align: center;">
    <img alt="alt" th:src="@{img/loading.gif}"/>
</div>
<div id="app" style="    margin: 16px 0 0 21px; width: 1268px;padding: 10px;">
    <form v-on:submit.prevent="selectMethod()">
        <input type="text" class="sel" placeholder="请输入用户编号" v-model="userId"></input>
        <input type="text" class="sel" placeholder="请输入用户名" v-model="username"></input>
        <input type="text" class="sel" placeholder="请输入用户姓名" v-model="trueName"></input>
        <button type="submit" class="layui-btn layui-btn-xs layui-btn-normal"  style="  width: 46px;margin: 0px 636px 0px 0px;float: right;
        height: 24px;"><span class="fa fa-search"></span>搜索</button>

    </form>
</div>


<!-- 主体 -->
<div class="wrapper wrapper-content  animated fadeInRight" style="padding-top: 0;">
    <div class="row">
        <div class="col-sm-12">
            <div class="jqGrid_wrapper">
                <table id="table_list_2"></table>
                <div id="pager_list_2"></div>
            </div>
        </div>
    </div>
</div>


</body>
<style type="text/css">
    .ui-jqgrid .ui-jqgrid-bdiv {
        border-top: 1px solid #E1E1E1;
        overflow-x: auto;
    }
    .frozen-div .frozen-bdiv {
        background-color: #E4E6E9;/*与网页背景色一致*/
    }
    .sel{
        margin: 0 0 0 24px;
        width: 158px;
        height: 24px;
    }
    #table_list_2>tbody>tr>td, .ui-jqgrid-labels>th{
        padding: 8px 2px 8px 8px;
        border: 1px solid #e7eaec;
    }
    .jqgfirstrow{
        display: none;
    }
    *{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }





</style>
<script>
    layui.use(['form'], function(){
        var form = layui.form
            ,layer = layui.layer;
    });

</script>
<script th:src="@{js/jquery-ui.custom.min.js}"></script>
<script th:src="@{js/lin/dialog.js}"></script>
<script th:src="@{js/lin/user.js}"></script>

</html>
